<template>
	<div class="warehouse-select" :style="{padding:!read?'30rpx':'0'}">
		<div class="desc between" v-if="!read">
			选择展示的仓库 (已选:{{listData.filter(item=>item.checked).length}})
			<view></view>

			<div class="flex">
				<div class="refresh flex" @click="getData()">
					<image src="/static/card/refresh.png" style="width: 30rpx;height:30rpx;margin-right: 6rpx;">
					</image>
					刷新
				</div>

				<div class="add-pic-item center" style="min-width: 150rpx;margin-left: 30rpx;"
					@click="go('/pages/tabbar/order/warehouseManagement')">
					仓库管理
				</div>
			</div>

		</div>
		<scroll-view scroll-y="true" style="flex:1;overflow: auto;">
			<div class="warehouse">
				<template v-for="item in listData">
					<div class="item" @click="item.checked=!item.checked" v-if="(itemValue?itemValue.split(','):[]).indexOf(String(item.id))>-1||!read">
						 
						<div class="between">
							<div class="checkbox" v-if="!read" :class="{checked:item.checked}">
							</div>
							<div class="icon">
								<image src="/static/card/warehouse.png" mode="widthFix" style="width: 35rpx;"></image>
							</div>
						</div>

						<div class="between head">
							<div class="b">{{item.name}}</div>
							<div class="city flex" style="justify-content: flex-end;">
								<image src="/static/card/address.png" mode="widthFix"
									style="width: 25rpx;margin-right: 8rpx;">
								</image>
								{{item.area.mergename}}
							</div>
						</div>
						<div class="address">
							{{item.address}}
						</div>
						<div class="between waredata">
							<div class="item">
								<div class="label">仓库面积</div>
								<div class="value">{{item.square}}²米</div>
							</div>
							<div style="width:50rpx"></div>
							<div class="item">
								<div class="lbel">
									库位数量
								</div>
								<div class="value">
									{{item.storage_count||0}}个
								</div>
							</div>
						</div>
					</div>
				</template>

			</div>
		</scroll-view>
		<div class="submit" v-if="!read" @click="confirm">确认选择</div>
	</div>
</template>

<script>
	export default {
		props: ["warehouseSelectIsShow", "u_id", "itemValue", "read"],
		data() {
			return {
				listData: []
			}
		},
		created() {
			this.getData();
		},
		watch: {
			itemValue() {
				this.init()
			}
		},
		methods: {
			init() {
				if (this.itemValue) {
					const ids = this.itemValue.split(",").map(item => String(item))
					this.listData.forEach(item => {
						if (ids.indexOf(String(item.id)) > -1) {
							item.checked = true
						}
					})
				}
			},
			getData() {
				this.listData = []
				this.$u.api.basic.warehouse({
					user_id: uni.getStorageSync("user_id"),
					keyword: this.keyword,
					page: this.page,
					limit: 999
				}).then(res => {
					if (res) {
						res.forEach(item => {
							item.checked = false;
						})
					}
					this.listData = res
					this.init();
				})
			},
			go(url) {
				uni.navigateTo({
					url
				})
			},
			confirm() {
				this.$emit('update:warehouseSelectIsShow', false)
				this.$emit('change', this.listData.filter(item => item.checked).map(item => item.id).join(","))
			},

		}
	}
</script>

<style lang="less">
	.submit {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		left: 100%;
		font-size: 30rpx;
		font-weight: 400;
		height: 112rpx;
		background: linear-gradient(90deg, #2B61EB 0%, #4BADFD 100%);
	}

	.warehouse-select {
		display: flex;
		flex-direction: column;
		height: 100%;
		width: 100%;
		justify-content: space-between;
		align-items: stretch;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.desc {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0;
		font-size: 24rpx;
		color: #333;
		font-weight: bold;
	}

	.flex {
		display: flex;
		align-items: center;

	}

	.center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.between {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.warehouse {
		display: flex;
		flex-wrap: wrap;

		.icon {
			width: 50rpx;
			height: 50rpx;
			border-radius: 10rpx;
			border: 1rpx solid #f0f0f0;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.address {
			color: #666;
			font-size: 22rpx;
			margin: 8rpx 0;
		}

		.b {
			font-weight: bold;
			color: #3d3d3d;
			font-size: 26rpx;
			margin-bottom: 16rpx;
			width: 50%;
		}

		.city {
			width: 40%;
			text-align: right;
			color: #6d6d6d;
		}

		.item {
			border: 1rpx solid #ddd;
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			margin-bottom: 16rpx;
			border-radius: 20rpx;
			font-size: 22rpx;
		}

		.head {
			align-items: flex-start;
			margin-top: 20rpx;
		}

		.waredata {
			margin-top: 16rpx;

			.label {
				font-size: 22rpx;
				color: #6d6d6d;
			}

			.value {
				margin-top: 8rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #1d1d1d;
			}
		}
	}

	.checked {
		border-color: #06C36E !important;
		border-width: 8rpx !important;
	}

	.checkbox {
		width: 35rpx;
		height: 35rpx;
		background-color: #fff;
		border: 1rpx solid #999999;
		border-radius: 50%;
		box-sizing: border-box;
	}

	.add-pic-item {
		font-weight: bold;
		color: #fff !important;
		border-radius: 30rpx;
		padding: 10rpx 15rpx;
		font-size: 24rpx;
		background: linear-gradient(90deg, #2B61EB 0%, #4BADFD 100%);
	}

	.refresh {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999;
		font-weight: normal;
		font-size: 26rpx;
		padding: 10rpx 20rpx;
		border-radius: 50rpx;

		&:active {
			background-color: #f5f5f5;
		}
	}
</style>